<template>
	<view class="u-page">
		<!-- 所有内容的容器 -->
		<u-navbar :is-back="false" :is-fixed="true" title=" " :background="background" :border-bottom="false">
			<view class="slot-wrap box box-align-center">
				<u-image src="https://www.wytldy.com/file/20230624/1687610421539logo.jpg" width="53rpx" height="53rpx"
					shape="circle"></u-image>
				<!-- <image src="../../static/indexLogo.png" mode="" style="width: 53rpx;height: 53rpx; border-radius: 50%;"></image> -->
				<view class="ml10 tl">
					五育通劳动教育云
				</view>
			</view>
		</u-navbar>
		<view class="img">
		</view>
		<view class="content">
			<view class="box box-pack-around box-align-center" style="padding: 40rpx 10rpx;">
				<view class="item" v-for="(item,index) in itemList" :key="index" @click="goTabbar(item.name)">
					<u-image :src="item.url" mode="" width="105rpx" height="106rpx"></u-image>
					{{item.title}}
				</view>
			</view>
			<view class="zx">
				<view class="">
					<view style="padding: 40rpx 20rpx;">
						<u-section title="资讯" font-size="34" sub-title="更多" @click="goNews"></u-section>
					</view>
					<view class="list box box-align-center">
						<u-avatar :src="newsInfo.display" mode="square"></u-avatar>
						<view class="ml10 box box-tb box-align-start">
							<h3 style="font-weight: bold;font-size: 32rpx;">{{newsInfo.title}}</h3>
							<view v-html="newsInfo.cont"
								style="word-break: break-all;overflow: hidden;height: 45rpx;width: 460rpx;">
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mt20">
				<view class="course ">
					<u-section title="推荐课程" font-size="34" sub-title="更多" @click="goCourse"></u-section>
					<view class="course-list box box-align-center mt20" v-for="(item,index) in courseList" :key="index"
						@click="goDetail(item)">
						<u-image width="240rpx" height="180rpx" :src="item.image"></u-image>
						<view class="ml10 box box-tb">
							<h3 style="font-weight: bold;font-size: 32rpx;">{{item.name}}</h3>
							<view class="" style="color: #ABB0C4;font-size: 24rpx;">
								共{{item.stageCnt}}章
							</view>
							<view class="mt20 times">
								<u-icon name="eye" color="#181623 " size="32" class="mr10"></u-icon>
								{{item.clickCnt}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view-tabbar :current="1"></view-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [{
					title: '劳动成果',
					url: 'https://www.wytldy.com/file/20230619/1687185997322劳动风采.png',
					name: 'ldcg'
				}, {
					title: '主题活动',
					url: 'https://www.wytldy.com/file/20230619/1687186026109实践活动.png',
					name: 'zthd'
				}, {
					title: '劳动课程',
					url: 'https://www.wytldy.com/file/20230619/1687186079949课程任务.png',
					name: 'ldkc'
				}, {
					title: '劳动实践',
					url: 'https://www.wytldy.com/file/20230619/1687186044783实践任务.png',
					name: 'ldsj'
				}],
				background: {
					backgroundColor: 'transparent',
					transitionDuration: ".25s, .5s"
				},
				newsInfo: {},
				courseList: [],
				role: uni.getStorageSync('role')
			}
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			if (e.scrollTop >= 25) {
				this.background.backgroundColor = "#e5eafe"
			} else {
				this.background.backgroundColor = "transparent"
			}
		},
		onLoad() {
			this.getList();
			this.getCourseList()
		},
		onShareAppMessage(res) {
			wx.vibrateShort();
			return {
				title: '欢迎加入【五育通劳动教育云】~',
				path: '/team/tr/invite',
				imageUrl: 'https://yh-sys.oss-cn-beijing.aliyuncs.com/2AA82D3CF32F47D0BBFBC6037E73D503join.png?Expires=4792987242&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=skoxCO1pZ1kn3DJIiBTnGM%2FO2oY%3D'
			}
		},
		onShareTimeline() {
			wx.vibrateShort();
			return {
				title: '欢迎加入【五育通劳动教育云】~',
				imageUrl: 'https://yh-sys.oss-cn-beijing.aliyuncs.com/2AA82D3CF32F47D0BBFBC6037E73D503join.png?Expires=4792987242&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=skoxCO1pZ1kn3DJIiBTnGM%2FO2oY%3D'
			}
		},
		methods: {
			goTabbar(name) {
				switch (name) {
					case 'ldcg':
						uni.navigateTo({
							url: "/team/LaborAchievements/LaborAchievements"
						})
						break;
					case 'zthd':
						uni.navigateTo({
							url: "/team/Theam/Theam"
						})
						break;
					case 'ldkc':
						uni.reLaunch({
							url: "/pages/Course/Course"
						})
						break;
					default:
						if (this.role == 'tr') {
							uni.reLaunch({
								url: "/pages/TeacherePracticalTasks/TeacherePracticalTasks"
							})
						} else if (this.role == 'stu') {
							uni.reLaunch({
								url: "/pages/StudentPracticalTasks/StudentPracticalTasks"
							})
						} else {
							uni.reLaunch({
								url: "/pages/PracticalTasks/PracticalTasks"
							})
						}
						break;
				}
			},
			goNews() {
				uni.navigateTo({
					url: "/pageHome/news"
				})
			},
			//获取资讯列表
			getList() {
				let opts = {
					url: '/information/pagelist',
					method: 'post'
				};
				let params = {
					pageNum: 1,
					pageSize: 1000
				};
				this.$api.RPost(opts, params).then(res => {
					console.log(res);
					if (res.state.code == 0) {
						this.newsInfo = res.body.data.list[0]
					}

				})
			},
			goCourse() {
				uni.navigateTo({
					url: "/pageHome/RecommendedCourse/RecommendedCourse"
				})
			},
			getCourseList() {
				let opt = {
					url: "/ycouspublic/list"
				}
				let params = {
					cousname: "",
				}
				this.$api.post(opt, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.courseList = res.list
					}
				})
			},
			goDetail(item) {
				uni.setStorageSync("course-info", JSON.stringify(item))
				uni.navigateTo({
					url: "/Public/CourseDetail/CourseDetail?id=" + item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx 31rpx;
		margin-top: -40rpx;
		width: 100%;
		// height: 100%;
		background: #fff;
		box-shadow: 0rpx 5rpx 114rpx 0rpx rgba(147, 190, 235, 0.13);
		border-radius: 70rpx 70rpx 0rpx 0rpx;

	}

	.img {
		height: 400rpx;
		margin-top: -92px;
		background-image: url(https://www.wytldy.com/file/20230619/1687183949401banner.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.zx {
		width: 100%;
		height: 297rpx;
		background: linear-gradient(152deg, #E1E4FF, #EAEFFF);
		box-shadow: 0rpx 9rpx 46rpx 0rpx rgba(187, 205, 223, 0.14);
		border-radius: 26rpx;

		.list {
			box-sizing: border-box;
			padding: 0 20rpx;
			margin: 0 auto;
			width: 98%;
			height: 174rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.course {
		// height: 563rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 9rpx 46rpx 0rpx rgba(187, 205, 223, 0.14);
		border-radius: 23rpx;

		.times {
			padding: 6rpx 10rpx;
			background: #F6FAFF;
			border-radius: 44rpx;
			font-size: 20rpx;
			width: 120rpx;
		}
	}

	.slot-wrap {
		padding: 0 40rpx;
	}
</style>